<template>
  <div class="page-box">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      size="small"
    >
      <el-tab-pane label="待回款" name="first">
        <first-form v-if="activeName == 'first'"></first-form>
      </el-tab-pane>
      <el-tab-pane label="部分回款" name="second">
        <second-form v-if="activeName == 'second'"></second-form>
      </el-tab-pane>
      <el-tab-pane label="已完成回款" name="third">
        <third-form v-if="activeName == 'third'"></third-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup name="receivable">
import firstForm from './first'
import secondForm from './second'
import thirdForm from './third'
import { computed, getCurrentInstance, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRouter()
const data = reactive({
  activeName: 'first'
})
const { activeName } = toRefs(data)
function handleClick() {}
</script>
<style lang="scss" scoped>
.page-box {
  display: block;
  padding-top: 16px;
  margin-left: -1px;
}
</style>
